let hour = document.querySelector(".hour");
let min = document.querySelector(".min");
let second = document.querySelector(".second");
let time = document.querySelector(".time");
let dates = document.querySelector(".date");
let btn = document.querySelector(".btn");
let body = document.querySelector("body");
let clock = document.querySelector(".clock");
let points = document.querySelector('.points')
let flag = false;
let days = [
	"星期天",
	"星期一",
	"星期二",
	"星期三",
	"星期四",
	"星期五",
	"星期六",
];
let date, h, m, s, month, day, d, dayss;

setInterval(() => {
	date = new Date();
	h = date.getHours();
	m = date.getMinutes();
	s = date.getSeconds();
	month = date.getMonth() + 1;
	day = date.getDate();

	d = h > 12 ? "PM" : "AM";
	h = h > 12 ? h % 12 : h;
	hour.style.transform = `rotate(${30 * h - 90}deg)`;
	min.style.transform = `rotate(${6 * m + 90}deg)`;
	second.style.transform = `rotate(${6 * s + 90}deg)`;

	let dayss = days[date.getDay()];

	time.innerHTML = `${h}:${m < 10 ? "0" + m: m} ${d}`;
	dates.innerHTML = `${dayss} ${month > 10 ? month : "0" + month}月${
		day > 10 ? day : "0" + day
	}日`;
}, 1000);

btn.addEventListener("click", (e) => {
	if (!flag) {
		e.target.innerHTML = "黑色";
		body.classList.remove("dark");
		body.classList.add("white");
        clock.style.border = `1px solid #000`;
        points.style.backgroundColor = '#000'
	} else {
		e.target.innerHTML = "浅色";
		body.classList.remove("white");
        body.classList.add("dark");
        clock.style.border = `1px solid #fff`;
        points.style.backgroundColor = "#fff";
    }
    flag = !flag
});
